<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Insert title here</title>
<script type="text/javascript"
	src="http://api.map.baidu.com/api?v=2.0&ak=SWYiGnCPXDEGf07433O2LNAFXVQeQmeL"></script>
<script type="text/javascript" src="${request.contextPath}/static/js/jquery-1.8.0.js"></script>
<link href="${request.contextPath}/static/js/ztree/css/demo.css" rel="stylesheet" />
<link rel="stylesheet" href="${request.contextPath}/static/js/ztree/zTreeStyle/zTreeStyle.css"
	type="text/css">
<script type="text/javascript"
	src="${request.contextPath}/static/js/ztree/jquery.ztree.core.min.js"></script>
<link rel="stylesheet" type="text/css"
	href="${request.contextPath}/static/js/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="${request.contextPath}/static/js/themes/icon.css">
<script type="text/javascript" src="${request.contextPath}/static/js/jquery.easyui.min.1.2.2.js"></script>
<script src="${request.contextPath}/static/js/vue/vue.min.js" charset="utf-8"></script>
</head>
<body>
<#--<div id="r-result">搜索:<input type="text" id="suggestId" size="20" value="百度" style="width:150px;" /></div>
<div id="searchResultPanel" style="border:1px solid #C0C0C0;width:150px;height:auto; display:none;"></div>-->
	<div style="width: 1455px; height: 800px; border: 1px solid gray"
		id="container">
	</div>
	<div data-options="region:'east',iconCls:'icon-reload',split:true"
		style="position: absolute; top: 0px; left: 1457px; width: 277px; height: 800px; border: 5px; bacrground-color: #FAF8AB">
		<div>
			<table class="easyui-datagrid" title="司法部门信息"
				style="width: 277px; height: 15px">
			</table>
			<div style="width: 265px; height: 355px; overflow: auto;">
				<ul id="jub" class="ztree" style="width: 277px; height: 355px;"></ul>
			</div>
		</div>
		<table id="tt"></table>
		<div style="width: 275px; height: 367px; overflow: auto;">
			<table border="2px" id="vm">
                <tr>
                    <td width="5%" align="center" bgcolor="#EFFBFE"></td>
                    <td width="13%" align="center" bgcolor="#EFFBFE">编号</td>
                    <td width="28%" align="center" bgcolor="#EFFBFE">姓名</td>
                    <td width="28%" align="center" bgcolor="#EFFBFE">电话</td>
                    <td width="28%" align="center" bgcolor="#EFFBFE">状态</td>
                </tr>
                <tr v-for="item in result">
                    <td align="center"><input type="checkbox" name="checkbox-id"></td>
                    <td v-text="item.id" align="center"></td>
                    <td v-text="item.name" align="center"></td>
                    <td v-html="item.phonenum" align="center"></td>
                    <td v-text="item.state" align="center"></td>
                </tr>
			</table>
		</div>

		<input type="button" value="人员定位"
			style="width: 125px; background-color: #98EBFD; border-radius: 12%"
			onclick="place()" id="loca" />&nbsp;
		<input type="button"
			style="width: 125px; background-color: #98EBFD; border-radius: 12%"
			value="最后位置" onclick="pla()" id="oloca" />
	</div>
	<script type="text/javascript">
		var vm = new Vue({
			el : '#vm',
			data : {
				result : []
				
			}
		});
		//获取ztree字节点的值
		function zTreeOnClick(treeId, treeNode, clickFlag) {
			$.ajax({
				url : '${request.contextPath}/usermap/loca',//异步加载得到指定司法局下面犯人的信息
				data : {
					id : clickFlag.id
				},
				success : function(res) {
					vm.result = res.data;
				}
			});
		}
		var zNodes = [];
		//zTree属性设置
		var setting = {
			view : {
				showLine : true//显示节点之间的连线
			},
			callback : {
				onClick : zTreeOnClick//每次点击事件发生方法都被调用
			},
			data : {
				simpleData : {
					enable : true//设置每次将后台传来的数据都解析为json格式
				}
			}
		}
		var getDepts = function() {
			$.ajax({
				url : "${request.contextPath}/usermap/judic",//异步加载得到所有司法局信息
				success : function(result) {
					zNodes = result.data;
					$.fn.zTree.init($("#jub"), setting, zNodes);//将zTree初始化
				}
			});
		}
		$(document).ready(function() {
			getDepts();//页面一加载完成就运行这个方法
		});	

	</script>

</body>
<script type="text/javascript" >
var $td;
function mymethod(){
	var $check = $("table").find(":checkbox").filter(":checked");
	// 找到选中的复选框所在的行  
	var $tr = $check.eq(0).parent().parent();
	// 找到此行中的某个td   
	$td = $tr.find("td").eq(1).text();
	if ($td == "") {
				alert("请选择人员后在操作..");
			}
}
//动态显示矫正人员所在位置
	function mapps(res){
		var lon = res.data[0].longitude;
		var lat = res.data[0].latitude;
		 var add = res.data[0].adds;
		if (lon == null || lat == null) {
			alert("此人暂时无更新信息")
		}
		var point = new BMap.Point(lon, lat); // 创建点坐标
		map.centerAndZoom(point, 12);//初始化地图，设置中心点坐标和地图别
		var marker = new BMap.Marker(point);
		map.clearOverlays();
		var opts = {
			//width : 250,     // 信息窗口宽度
			//height: 100,     // 信息窗口高度
			title : "<span style='font-size:15px;color:#FF0000;background-color:#FFFFFF'>位置</span>" // 信息窗口标题
		}
		var infoWindow = new BMap.InfoWindow(
				"<span style='font-size:15px;color:blue;background-color:#FFFFFF'>"+add+"</span>",
				opts); // 创建信息窗口对象
		map.openInfoWindow(infoWindow, map.getCenter());
		map.addOverlay(marker);// 实例化标注,并添加到地图中

	}


var map = new BMap.Map("container"); // 创建地图实例  
var longitude = "113.549805";//经度  
var latitude = "34.808465";//纬度  
var point = new BMap.Point(longitude, latitude); // 创建点坐标  
map.centerAndZoom(point, 12);//初始化地图，设置中心点坐标和地图级别：级别为3-19级，数字越高，精确度越高
//addControl方法用于将控件添加到地图上去
map.addControl(new BMap.NavigationControl()); //添加平移缩放控件(地图左上角 )
map.addControl(new BMap.MapTypeControl());//添加地图类型控件
//map.addControl(new BMap.PanoramaControl());//添加全景控件
map.addControl(new BMap.CopyrightControl());//添加版本号
map.addControl(new BMap.ScaleControl());//添加比例尺控件(左下角)
map.enableScrollWheelZoom();//允许鼠标滑轮操作
map.addEventListener("click", function(e) {//添加点击事件，如果用户点击后出现标志点
	var point = new BMap.Point(e.point.lng, e.point.lat);
	var marker = new BMap.Marker(point);
	map.addOverlay(marker);
});

$('#tt').datagrid({
	title : '人员信息',
		/*url:"${request.contextPath}/usermap/loca&id=3",*/
	width : 275,
	height : 15,
	fitColumns : true,
	nowrap : false,
	columns : [ [

	] ],
});

//根据矫正人员信息得到现在的位置
function place() {
	 mymethod();
	$.ajax({
		url : '${request.contextPath}/usermap/uuser',
		data : {
			id : $td
		},
		success : function(res) {
			mapps(res);
		}
	});

}
//根据矫正人员信息得到最后的位置
function pla() {
	var add;
    mymethod();
	$.ajax({
		url : '${request.contextPath}/usermap/correct',
		data : {
			id : $td
		},
		success : function(res) {		
			mapps(res);
		}
	});
}

/*
//添加搜索
function G(id) {
    return document.getElementById(id);
}
var ac = new BMap.Autocomplete(    //建立一个自动完成的对象
        {"input" : "suggestId"
            ,"location" : map
        });

ac.addEventListener("onhighlight", function(e) {  //鼠标放在下拉列表上的事件
    var str = "";
    var _value = e.fromitem.value;
    var value = "";
    if (e.fromitem.index > -1) {
        value = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
    }
    str = "FromItem<br />index = " + e.fromitem.index + "<br />value = " + value;

    value = "";
    if (e.toitem.index > -1) {
        _value = e.toitem.value;
        value = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
    }
    str += "<br />ToItem<br />index = " + e.toitem.index + "<br />value = " + value;
    G("searchResultPanel").innerHTML = str;
});

var myValue;
ac.addEventListener("onconfirm", function(e) {    //鼠标点击下拉列表后的事件
    var _value = e.item.value;
    myValue = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
    G("searchResultPanel").innerHTML ="onconfirm<br />index = " + e.item.index + "<br />myValue = " + myValue;

    setPlace();
});

function setPlace(){
    map.clearOverlays();    //清除地图上所有覆盖物
    function myFun(){
        var pp = local.getResults().getPoi(0).point;    //获取第一个智能搜索的结果
        map.centerAndZoom(pp, 18);
        map.addOverlay(new BMap.Marker(pp));    //添加标注
    }
    var local = new BMap.LocalSearch(map, { //智能搜索
        onSearchComplete: myFun
    });
    local.search(myValue);
}*/
</script>
</html>